<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue-router.js"></script>
    <link rel="stylesheet" href="../libs/animate.css" />
    <style>
      .box {
        width: 400px;
        height: 400px;
        border: 1px solid darkgoldenrod;
        border-radius: 10px;
      }
      table {
        border: 1px solid #999;
        background: deeppink;
        color: #fff;
      }
      tr td {
        border: 1px solid #999;
        padding: 10px;
      }
      ul {
        background: darkgoldenrod;
        width: 40%;
      }
      .zoom-enter-active {
        animation: zoomInDown 1s;
      }
      .zoom-leave-active {
        animation: zoomOutDown 1s;
      }
      .slot {
        width: 50%;
        margin-top: 20px;
        border: 1px solid darkmagenta;
        border-radius: 10px;
        padding: 30px;
      }
      .router-link-exact-active,
      .router-link-active {
        padding: 5px;
        border-radius: 5px;
        background: darkorange;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <m-head></m-head>
      <hr />
      <h2>路由Demo</h2>
      <div class="box">
        <!-- 5.路由出口   告诉VUE 在哪里加载路由组件 -->
        <router-view></router-view>
      </div>
      <div>
        <!-- 6.路由导航  路由跳转 -->
        <a href="#/home">首页0</a>
        <router-link to="/home">首页</router-link>
        <router-link to="/find">发现</router-link>
        <router-link to="/mine">我都</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
      </div>
    </div>
    <template id="home">
      <div>
        <h2>home - home - home</h2>
      </div>
    </template>
    <template id="find">
      <div>
        <h2>Find - Find - 发现美丽</h2>
      </div>
    </template>
    <template id="mine">
      <div>
        <h2>Mine - Mine - 个人中心</h2>
      </div>
    </template>
    <template id="register">
      <div>
        <h2>register - register - 注册进行中</h2>
      </div>
    </template>
    <template id="notfound">
      <div>
        <h2>notfound - notfound - 404 - 未找到</h2>
      </div>
    </template>
    <script>
      //全局注册
      const bus = new Vue();
      Vue.component("mHead", {
        template: "<header>Head - Head - wh2116daydayup </header>",
      });
      //0.如果使用模板化机制编程 ，导入Vue 和 VueRouter ，要调用Vue.use(VueRouter)
      //1.定义 （路由）组件
      const Home = {
        template: "#home",
      };
      const Find = {
        template: "#find",
      };
      const Mine = {
        template: "#mine",
      };
      const Login = {
        template: "<h2>Login = Login = Login </h2>",
      };
      const Register = {
        template: "#register",
      };
      const NotFound = {
        template: "#notfound",
      };
      //2.定义路由
      //   每个路由应该映射一个组件。其中"component" 可以是
      //   通过Vue.extend() 创建的组件构造器
      const routes = [
        {
          path: "/home",
          component: Home,
        },
        {
          path: "/find",
          component: Find,
        },
        {
          path: "/mine",
          component: Mine,
        },
        {
          path: "/login",
          component: Login,
        },
        {
          path: "/register",
          component: Register,
        },
        {
          path: "/404",
          component: NotFound,
        },
        {
          path: "*",
          redirect: "/404", //redirect 重定向
        },
      ];
      //3.创建路由对象  然后传`routes` 配置
      const router = new VueRouter({
        routes: routes,
        base: "", //路由的基路径   上线的时候需要处理
        mode: "history", //hash 还有 history
      });
      //mode 路由模式
      // hash 带 # 路由   根据地址url的hash 切换来匹配路由  不  简洁和美观优雅
      //history 不带 # 根据 浏览器history h5 api 实现页面切换    简单优雅   不能刷新
      console.log(router);

      const vm = new Vue({
        router: router, //this.$router
        data: {
          title: "Vue  路由的初步学习使用",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
          console.log(this.$router);
          console.log(this.$route);
        },
      }).$mount("#app");
    </script>
  </body>
</html>
